<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
      <ul class="tools pos-right">
        <li class="item">
          <button class="btn" type="button" @click="showSettingWindow">
            <i class="icon icon-setting"></i>
          </button>
        </li>
      </ul>
    </div>
    <div class="box-body">
      <div class="chart" id="chart-remoter-4"></div>
      <ul class="towerlist">
        <li class="item">
          <div class="title">隐患告警高峰时间</div>
          <div class="subtitle num fg-red" style="font-size:22px;">{{peakDate}}</div>
        </li>
        <li class="item">
          <div class="title">高峰当日接到火警</div>
          <div class="subtitle num fg-orange">{{disasterThatDay}}<small>次</small></div>
        </li>
        <li class="item">
          <div class="title">高峰当日隐患集中在</div>
          <div class="subtitle fg-cyan">{{peakDistrict}}</div>
        </li>
      </ul>
      <div class="chartSetting" v-show="showSetting">
        <div class="form">
          <div class="form-head">
            <div class="title">选择时间范围</div>
          </div>
          <div class="form-body">
            <div class="form-item">
              <div class="label">开始时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  :max="timeLimit"
                  :min="timeMin"
                  v-model="startTime"
                >
              </div>
            </div>
            <div class="form-item">
              <div class="label">结束时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  :max="timeLimit"
                  :min="timeMin"
                  v-model="endTime"
                >
              </div>
            </div>
          </div>
          <div class="form-foot">
            <button type="button" @click="saveSetting" class="btn bg-green">
              <span class="text">确定</span>
            </button>
            <button type="button" @click="cancelSetting" class="btn bg-green">
              <span class="text">关闭</span>
            </button>
          </div>
        </div>
      </div>
      <x-loading :show="showLoading"></x-loading>
      <dl-Timeliness ref="dialog" :show="showModal" :take="keyModal"></dl-Timeliness>
      <dl_Timeselvo ref="dialog_problems" :show="showModal_problems" :take="keyModal_sevol"></dl_Timeselvo>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import dlTimeliness from "@/view/remoter/dl_Timeliness";
import dlTimeselvo from "@/view/remoter/dl_Timeselvo";

export default {
  data() {
    return {
      startTime: this.dateShift(-7),
      endTime: this.dateShift(0),
      timeLimit: this.dateShift(0),
      timeMin: this.dateShift(-365),
      showSetting: false,
      showLoading: false,
      peakDate: "暂无",
      disasterThatDay: 0,
      peakDistrict: "暂无",
      chartInstance: null,
      option: null,
      showModal: false,
      keyModal: null,
      showModal_problems:false,
      keyModal_sevol:null
    };
  },
  props: {
    title: String
  },
  computed: {
    hintText() {
      return `显示数据自${this.startTime}起，截止至${this.endTime}`;
    }
  },
  components: {
    "x-loading": Loading,
    "dl-Timeliness": dlTimeliness,
    "dl_Timeselvo": dlTimeselvo
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    showSettingWindow() {
      this.showSetting = true;
    },
    cancelSetting() {
      this.showSetting = false;
    },
    saveSetting() {
      this.renderChart();
      this.showSetting = false;
    },
    renderChart() {
      let $this = this;
      let params = {
        startTime: this.startTime + " 00:00:00",
        endTime: this.endTime + " 23:59:59"
      };
      this.showLoading = true;
      axios
        .get(this.URLHEAD + "getDangerTimeSpread", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.peakDate = data.Data.peakDate;
          this.disasterThatDay = data.Data.disasterThatDay;
          this.peakDistrict = data.Data.peakDistrict.split("-")[2];
          this.option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B"
                }
              }
            },
            grid: {
              left: 30,
              right: 40,
              bottom: 10,
              top: 60,
              containLabel: true
            },
            legend: {
              top: "top",
              left: "left",
              data: ["隐患告警单位数", "隐患已解决单位数"],
              textStyle: {
                color: "#fff",
                fontSize: 12
              }
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.5)"
                  }
                },
                data: data.Data.list.map(item => {
                  return item.name;
                })
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "单位数量（家）",
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14,
                    color: "rgba(255,255,255,0.3)"
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                }
              },{
                type: "value",
                name: "隐患解决(家)",
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14,
                    color: "rgba(255,255,255,0.3)"
                  },
                  formatter: "{value}家"
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                }
              }
            ],
            series: [
              {
                name: "隐患告警单位数",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    color: "rgba(255,255,255,1)"
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(205,52,42, 0.5)"
                        },
                        {
                          offset: 0.8,
                          color: "rgba(235,235,21, 0)"
                        }
                      ],
                      false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgba(205,52,42,1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(235,235,21,1)"
                      }
                    ])
                  },
                  emphasis: {
                    color: "rgb(99,250,235)",
                    borderColor: "rgba(99,250,235,0.2)",
                    extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                    borderWidth: 10
                  }
                },
                data: data.Data.list.map(item => {
                  return item.value;
                })
              },
              {
                name: "隐患已解决单位数",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    color: "rgba(255,255,255,1)"
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(2, 185, 44, 0.5)"
                        },
                        {
                          offset: 0.8,
                          color: "rgba(0, 211, 49, 0)"
                        }
                      ],
                      false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgba(2, 185, 44,1)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0, 211, 49,1)"
                      }
                    ])
                  },
                  emphasis: {
                    color: "rgb(99,250,235)",
                    borderColor: "rgba(99,250,235,0.2)",
                    extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                    borderWidth: 10
                  }
                },
                data: data.Data.list.map(item => {
                  return item.value2;
                })
              }
            ]
          };
          this.chartInstance = this.$Crender("chart-remoter-4", this.option);
          this.chartInstance.on("click", e => {
            let selectTime = e.name;
             switch (e.seriesName) {
              case "隐患告警单位数":
                $this.keyModal = selectTime;
                $this.$refs.dialog.query(selectTime);
                break;
              case "隐患已解决单位数":
                $this.keyModal_sevol = selectTime;
                $this.$refs.dialog_problems.query(selectTime);
                break;
            }
            // $this.keyModal = selectTime;
            // $this.$refs.dialog.query(selectTime);
          });
          this.showLoading = false;
        });
    }
  }
};
</script>